<template>
  <div class="smart-service">
    <div class="list">
      <router-link to="/AbroadApply" tag="div" class="list-item"
        >因私出国境申请</router-link
      >
      <router-link to="/PartTimeWorkApply" tag="div" class="list-item"
        >参加社会兼职申请</router-link
      >
      <router-link to="/ActivityApply" tag="div" class="list-item"
        >参加社会活动申请</router-link
      >
      <router-link to="/NewspaperList" tag="div" class="list-item"
        >报刊订阅</router-link
      >
      <router-link to="/AdviceSend" tag="div" class="list-item"
        >建言献策</router-link
      >
    </div>
  </div>
</template>

<script>
export default {
};
</script>

<style lang="less" scoped>
.smart-service {
  min-height: 100%;
  box-sizing: border-box;
  font-size: 42px;
  color: #333333;
  padding: 24px;
  background: #f5f5f5;
  .list {
    .list-item {
      position: relative;
      background: #fff;
      height: 190px;
      line-height: 190px;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      font-weight: normal;
      font-stretch: normal;
      padding-left: 200px;
      &:not(:first-child) {
        margin-top: 10px;
      }
      background-repeat: no-repeat;
      background-position: 32px center;
      background-size: 123px 123px;
      @modeList: Abroad, PartTimeWork, Activity, NewspaperSubscribe, AdviceSend;
      .bgIcon(@n, @i:1) when (@i <= @n) {
        &:nth-child(@{i}) {
          @word: extract(@modeList, @i);
          background-image: url("../assets/images/@{word}.png");
        }
        .bgIcon(@n, (@i + 1));
      }
      .bgIcon(length(@modeList));
    }
  }
}
</style>
